<template>
  <div class="card">
    <header v-if="header">
      <slot name="header" />
      <a v-if="back" href="javascript:;" class="backPrev" title="返回上页" @click="backPrev">
        <svg-icon icon-class="Return" /> <span>返回</span>
      </a>
      <a v-if="backName" href="javascript:;" class="backPrev" title="返回上页" @click="backNameEvent">
        <svg-icon icon-class="Return" /> <span>返回</span>
      </a>
      <!--|
      <router-link to="/index" class="backHome" title="返回首页">
        <svg-icon icon-class="close" />
      </router-link>-->
    </header>
    <section>
      <div v-if="filter" class="filter">
        <slot name="filter" />
      </div>
      <main>
        <slot />
      </main>
    </section>

  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon'

export default {
  name: 'Card',
  components: { SvgIcon },
  props: {
    header: {
      type: Boolean,
      default: true
    },
    filter: {
      type: Boolean,
      default: true
    },
    back: {
      type: Boolean,
      default: false
    },
    backName: {
      type: [String, Boolean],
      default: false
    }
  },
  data() {
    return {
      title: ''
    }
  },
  created() {
    this.title = this.$route.meta.title
  },
  methods: {
    backPrev() {
      this.$router.go(-1)
    },
    backNameEvent() {
      this.$router.push({ name: this.backName })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../styles/variables";

  .card {
    background: #fff;
    margin: 10px;
    position: relative;
    height: calc(100vh - 140px);
    overflow: auto;
    header{
      min-height:50px;
      border-bottom: 1px solid #E3E3E5;
      padding:10px;
      position: relative;
    }

    .filter {
      border-bottom: 1px solid #E3E3E5;
      padding: 10px 10px 0;
    }
    main{
      padding: 10px;
    }
    .backHome {
      position: absolute;
      right: 20px;
      top: 50%;
      margin-top: -14px;
      font-size: 18px
    }

    .backPrev {
      @extend .backHome;
      right: 15px;
      font-size: 16px;
      &:hover{
        text-decoration: none;
      }
      span {
        font-size: 14px;
        color:#999;
        margin-left: 5px;
      }
    }

  }
</style>
